import React, { useState, useEffect } from 'react';
import PopImgShow from '@/components/PopImgShow';
import { backgroundObj } from '@/utils/utils'
import VideoPreview from '@/components/DescriptionsCondition/VideoPreview';
import './index.less';
function getFileExtensionRegex(filename) {
    // 匹配最后一个点后的非点字符（排除以点开头的隐藏文件）
    const match = filename.match(/\.([^.]+)$/);
    return match ? match[1] : '';
}


const MessageComponents = (props) => {
    const { data } = props
    const { answerUserType, content, askIndex, createTime, teacherProfile, teacherName, createTimeDesc, userProfile, username } = data
    const objData = JSON.parse(content) ? JSON.parse(content) : {}
    const { text, images = '' } = objData
    const imageList = images.length > 0 ? images.split(',') : []
    if (answerUserType === 'user') {
        return <div>
            <div className='MessageComponents_speak_time'>
                {createTimeDesc}
            </div>

            <div className='MessageComponents_speak_body'>

                <div className='MessageComponents_speak_title'>

                    <div style={backgroundObj(userProfile)} className='MessageComponents_speak_profile'></div>

                    <div className=''>
                        {username}
                    </div>
                    <div className='MessageComponents_speak_questionTitle'>
                        第{askIndex}次提问
                    </div>
                </div>
                <div className='MessageComponents_speak_content'>
                    {text || objData.content}
                </div>
                <div className='MessageComponents_speak_image'>
                    {imageList.map(val => {
                        if (getFileExtensionRegex(val) === 'mp4') {
                            return <div className='MessageComponents_speak_imageBox'>
                                <VideoPreview url={val}></VideoPreview>
                            </div>
                        }
                        else {
                            return <div className='MessageComponents_speak_imageBox'>
                                <PopImgShow url={val}></PopImgShow>
                            </div>
                        }
                    })}
                </div>
            </div>

        </div>
    }
    else {
        return <div>
            <div className='MessageComponents_speak_time'>
                {createTimeDesc}
            </div>

            <div className='MessageComponents_speak_teacherBody'>

                <div className='MessageComponents_speak_title'>

                    <div style={backgroundObj(teacherProfile)} className='MessageComponents_speak_profile'></div>

                    <div>
                        {teacherName}
                        的回答</div>
                </div>
                <div className='MessageComponents_speak_content'>
                    {text}
                </div>
                <div className='MessageComponents_speak_image'>
                    {imageList.map(val => {
                        if (getFileExtensionRegex(val) === 'mp4') {
                            return <div className='MessageComponents_speak_imageBox'>
                                <VideoPreview url={val}></VideoPreview>
                            </div>
                        }
                        else {
                            return <div className='MessageComponents_speak_imageBox'>
                                <PopImgShow url={val}></PopImgShow>
                            </div>
                        }
                    })}
                </div>
            </div>

        </div>
    }
}
export default MessageComponents

